import {useRouter,useSearchParams} from "next/navigation";
import React from 'react';
import {Status} from ".prisma/client";
import { Select } from '@radix-ui/themes';

const statuses:{label:string;value:Status|"ALL"}[]=[
    {label:"All",value:"ALL"},
    {label:"Open",value:"OPEN"},
    {label:"In Progress",value:"IN_PROGRESS"},
    {label:"Closed",value:"CLOSED"},
]

const IssueStatusFilter = () => {
    const router =useRouter();
    const searchParams = useSearchParams();
    const params = new URLSearchParams(searchParams);
    return (
        <Select.Root
           onValueChange={(status)=>{
               params.set("status",status);
               router.push("/issues?"+params.toString());
           }}
           defaultValue={params.get("status")||""}
        >
            <Select.Trigger placeholder={"Filter by status..."}></Select.Trigger>
            <Select.Content>
                {statuses.map((status)=>(
                    <Select.Item value={status.value!} key={status.value}>
                        {status.label}
                    </Select.Item>
                ))}
            </Select.Content>
        </Select.Root>
    );
};

export default IssueStatusFilter;